.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky{
	position: sticky;
}

.abs-center {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-reverse{
  display: flex;
  flex-direction: row-reverse;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.df {
  display: flex;
}

.fdc {
  flex-direction: column;
}

.fdr {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.col-center {
  align-items: center;
}

.col-top {
  align-items: flex-start;
}

.col-bottom {
  align-items: flex-end;
}

.row-center {
  justify-content: center;
}

.row-left {
  justify-content: flex-start;
}

.row-right {
  justify-content: flex-end;
}

.row-between {
  justify-content: space-between;
}

.row-around {
  justify-content: space-around;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.flex-col {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.area-center {
  margin: 0 auto;
}

.cursor {
  cursor: pointer;
}

.border-top-1 {
  border-top: 1rpx solid #E1E1E1;
}

.border-1 {
  border: 1rpx solid #E1E1E1;
}

.border-bottom-C {
  border-bottom: 1rpx solid #CCCCCC;
}

.border-bottom-999 {
  border-bottom: 1rpx solid rgba(153,153,153,0.2400);
}

.border-999 {
  border: 1rpx solid #999999;
}

@for $i from 0 to 10 {
  .opy-#{$i} {
    opacity: $i / 10;
  }
}

// 定义flex等分
@for $i from 0 through 12 {
  .flex-#{$i} {
    flex: $i;
  }
}

// 定义字体(rpx)单位，小于100都为rpx单位字体
@for $i from 9 to 100 {
  .font-#{$i} {
    font-size: $i + rpx;
  }
}

// 行高
@for $i from 9 to 300 {
  .lh-#{$i} {
    line-height: $i + rpx;
  }
}

@for $i from 400 to 1000 {
  @if $i % 100==0 {
    .font-weight-#{$i} {
      font-weight: $i;
    }
  }
}

@for $i from 0 to 2000 {
  .w-#{$i} {
    width: $i+rpx;
  }
}

@for $i from 0 to 2000 {
  .h-#{$i} {
    height: $i+rpx;
  }

	.top-#{$i} {
    top: $i+rpx;
  }
}

@for $i from 0 to 2000 {
  .mw-#{$i} {
    min-width: $i+rpx;
  }
}

@for $i from 0 to 2000 {
  .mh-#{$i} {
    min-height: $i+rpx;
  }
}

@for $i from 0 to 2000 {
  .maxh-#{$i} {
    max-height: $i+rpx;
  }
}

@for $i from 0 to 2000 {
  .maxw-#{$i} {
    max-width: $i+rpx;
  }
}

@for $i from 0 to 200 {
  .wb-#{$i} {
    width: $i*1%;
  }
}

@for $i from 0 to 200 {
  .radius-#{$i} {
    border-radius: $i+rpx;
  }
}

// 定义内外边距，历遍1-100
@for $i from 0 through 200 {

  // 只要双数和能被5除尽的数
  @if $i % 2==0 or $i % 5==0 {

    // 得出：margin-30或者m-30
    .margin-#{$i},
    .m-#{$i} {
      margin: $i + rpx !important;
    }

    // 得出：padding-30或者p-30
    .padding-#{$i},
    .p-#{$i} {
      padding: $i + rpx !important;
    }

    @each $short,
    $long in l left,
    t top,
    r right,
    b bottom {

      // 缩写版，结果如： m-l-30
      // 定义外边距
      .m-#{$short}-#{$i} {
        margin-#{$long}: $i + rpx !important;
      }

      // 定义内边距
      .p-#{$short}-#{$i} {
        padding-#{$long}: $i + rpx !important;
      }

      // 完整版，结果如：margin-left-30
      // 定义外边距
      .margin-#{$long}-#{$i} {
        margin-#{$long}: $i + rpx !important;
      }

      // 定义内边距
      .padding-#{$long}-#{$i} {
        padding-#{$long}: $i + rpx !important;
      }
    }
  }
}

/* start--文本行数限制--start */
.line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.line-2 {
  -webkit-line-clamp: 2;
}

.line-3 {
  -webkit-line-clamp: 3;
}

.line-4 {
  -webkit-line-clamp: 4;
}

.line-5 {
  -webkit-line-clamp: 5;
}

.line-6 {
  -webkit-line-clamp: 6;
}

.line-2,
.line-3,
.line-4,
.line-5,
.line-6 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; // 弹性伸缩盒
  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

/* end--文本行数限制--end */


/* start--Retina 屏幕下的 1rpx 边框--start */
.border,
.border-bottom,
.border-left,
.border-right,
.border-top,
.border-top-bottom {
  position: relative
}

.border-bottom:after,
.border-left:after,
.border-right:after,
.border-top-bottom:after,
.border-top:after,
.border:after {
  /* #ifndef APP-NVUE */
  content: ' ';
  /* #endif */
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  // 多加0.1%，能解决有时候边框缺失的问题
  width: 199.8%;
  height: 199.7%;
  transform: scale(0.5, 0.5);
  border: 0 solid #E1E1E1;
  z-index: 2;
}

.border-top:after {
  border-top-width: 1rpx
}

.border-left:after {
  border-left-width: 1rpx
}

.border-right:after {
  border-right-width: 1rpx
}

.border-bottom:after {
  border-bottom-width: 1rpx
}

.border-top-bottom:after {
  border-width: 1rpx 0
}

.border:after {
  border-width: 1rpx
}

/* end--Retina 屏幕下的 1rpx 边框--end */


/* start--clearfix--start */
.clearfix:after,
.clearfix:after {
  /* #ifndef APP-NVUE */
  content: '';
  /* #endif */
  display: table;
  clear: both
}

/* end--clearfix--end */
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.inline-block {
  display: inline-block;
}

.middle {
  vertical-align: middle;
}

.text-button {
  vertical-align: text-bottom;
}
